<template>
	<view class="contract uni-flex-column">
		<CustomNavBar class="navbar">
			<template v-slot:center>
				<view class="title">
					零付优惠
				</view>
			</template>
			<template v-slot:left>
				<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack">
					<uni-icons type="left" size="20"></uni-icons>
				</view>
			</template>
		</CustomNavBar>

		<view class="content">
			<!-- 优惠券头部 -->
			<view class="coupon-box">
				<view class="coupon-container">
					<view class="coupon-content">
						<view class="item" :class="{'active-border-top': showRulePopup, 'normal-mode': true}">
							<view class="left">
								<view v-if="coponsData?.usedAmount&&coponsData.type===1||coponsData.type===3">
									<text class="unit">¥</text>
									<text class="money">{{coponsData?.usedAmount}}</text>
								</view>
								<text v-if="coponsData.type===2&&coponsData?.discount"
									class="price-text">{{coponsData?.discount}}折</text>

								<text v-if="coponsData.type===2||coponsData.type===3" class='text2'>无门槛</text>

								<text class="condition"
									v-if="coponsData.type===1&&coponsData?.withAmount">满{{coponsData?.withAmount}}可用</text>
							</view>
							<view class="right">
								<view class="desc-box">
									<text class="desc" v-if="coponsData?.title">{{coponsData?.title}}</text>
									<text class="date" v-if="coponsData?.serviceLife">
										有效期至{{coponsData.serviceLife.slice(0,10)}}
									</text>

									<view class="rule" @click.stop='showRule(coponsData.useRule, index)'>使用规则
										<uni-icons type="right" size="12" color="#999999"></uni-icons>
									</view>
								</view>
								<view class="other-box" v-show="coponsData.nearExpire===1">
									<text class="expire">快过期</text>
								</view>

								<view class="image-box">
									<image :src="`${$ImgBaseUrl}tobeused-coupon.png`" mode="widthFix" />
								</view>
							</view>
							<!-- 上半圆点 -->
							<view class="coupon-dot coupon-dot-top"></view>
							<!-- 下半圆点 -->
							<view class="coupon-dot coupon-dot-bottom"></view>
						</view>
						<!-- 规则框 - 放在卡券外部但在同一个容器内 -->
						<view class="rules-box" :class="{'active-border-bottom': showRulePopup}"
							v-if="showRulePopup && currentRuleIndex === 0">
							{{ currentRule }}
						</view>
					</view>
				</view>
			</view>


			<!-- 服务列表 -->
			<view class="service-list">
				<z-paging ref="pagingRef" v-model="dataList" @query="queryList" :fixed="false">
					<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
					<view class="List-item uni-flex uni-justify-between" v-for="(item, index) in dataList" :key="index"
						@click="itemClick(item)">
						<image class="left_img" referrerpolicy="no-referrer" :src="item.baseSmallImgUrl" />
						<view class="uni-flex-item uni-flex uni-column uni-justify-between">
							<view class="title">{{item.itemName}}</view>
							<view class="desc">{{item.itemRemark}}</view>
							<view class="uni-flex uni-justify-between uni-align-center">
								<view class="uni-flex uni-align-center">
									<text class="price1">¥</text>
									<view class="price2">{{item.paramMinPrice}}
										<text class="price2-text">到手价</text>
									</view>
									<text class="pirce3">
										原价{{item.paramMaxPrice}}
									</text>
									<!-- <text class="text3">/{{item.paramPriceUnit}}</text> -->
								</view>
								<uni-icons type="right" size="12" color="#999999"></uni-icons>
							</view>
						</view>
					</view>
					<!-- 设置自己的empty组件，非必须。空数据时会自动展示空数据组件，不需要自己处理 -->
					<template #empty>
						<!-- 空数据提示，添加居中样式 -->
						<view class="empty-container">
							<view class="empty-content">暂无数据</view>
						</view>
					</template>
				</z-paging>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import CustomNavBar from "@/components/custom-navbar/index.vue";
	import {
		ImgBaseUrl
	} from '@/utils/domain.js'
	import {
		getAreaid
	} from "@/common/util.js";
	import {
		getSevItemList
	} from "@/api/home.js";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	// 响应式数据
	const dataList = ref([]);
	const pagingRef = ref(null);
	const coponsData = ref({})
	// 控制规则弹窗显示
	const showRulePopup = ref(false);
	// 当前显示规则的索引（这里优惠券只有一个，可固定为0）
	const currentRuleIndex = ref(-1);
	// 当前显示的规则内容
	const currentRule = ref('');
	// 显示规则（移除index参数，或固定为0）
	const showRule = (rule) => {
		// 如果当前已显示，则关闭
		if (showRulePopup.value) {
			showRulePopup.value = false;
			currentRuleIndex.value = -1;
		} else {
			currentRule.value = rule; // 存储当前规则内容
			currentRuleIndex.value = 0; // 固定索引为0（因只有一个优惠券）
			showRulePopup.value = true; // 显示弹窗
		}
	};
	onLoad((options) => {
		if (options.item) {
			coponsData.value = JSON.parse(decodeURIComponent(options.item));
			console.log('接收到的优惠券数据:', coponsData.value);
		}
	})
	// 列表数据请求
	const queryList = async (pageNum, pageSize) => {
		try {
			const params = {
				pageNum: pageNum,
				pageSize,
				// 优先使用当前选中的areaId，否则使用默认值
				areaId: getAreaid(),
			};

			// 动态添加 itemIdsStr 参数：仅当 usedCategory 有值时添加
			if (coponsData.value?.usedCategory) {
				params.itemIdsStr = coponsData.value.usedCategory;
			}

			// 补充其他参数 - 使用拆分后的serviceId和groupId
			// if (state.itemIds.length > 0) {
			// 	params.itemIds = state.itemIds.join(',');
			// } else {
			// 	params.groupId = state.currentGroupId; // 二级类目ID
			// 	params.serviceId = state.currentServiceId; // 一级类目ID
			// }

			// console.log('调用getSevItemList的参数:', params);
			const res = await getSevItemList(params);
			// 确保返回格式正确
			if (Array.isArray(res.rows)) {
				pagingRef.value.complete(res.rows);
			} else {
				throw new Error('接口返回数据格式错误，rows不是数组');
			}
		} catch (error) {
			console.error('getSevItemList调用失败:', error.message);
			pagingRef.value.complete(false); // 告诉z-paging加载失败
		}
	};
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	// 点击item事件
	const itemClick = (item) => {
		// 确保 coponsData.value.id 存在
		if (!coponsData.value?.id) {
			uni.showToast({
				title: '优惠券信息异常',
				icon: 'none'
			});
			return;
		}

		uni.navigateTo({
			url: `/pages/viewSonic/viewSonicDetail?id=${item.localId}&couponId=${coponsData.value.id}`
		});
	};
	onMounted(() => {
		// 若有接口请求，可在这里发起请求获取 serviceList 等数据
		// 示例（假设接口函数）：
		// getServiceList().then(res => {
		//   serviceList.value = res.data
		// })
	})
</script>

<style scoped lang="scss">
	.contract {
		height: 100vh;
		// background: linear-gradient(180deg, #EEF5FF 0%, #FFFFFF 100%);
	}

	.navbar {
		width: 100%;
	}

	.back {
		width: 44rpx;
		height: 44rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 50%;
	}

	.content {
		// padding: 20rpx;
		box-sizing: border-box;
		height: calc(100% - 100rpx); // 减去导航栏高度
	}

	.coupon-box {
		padding: 24rpx;
		background-color: #FF6A47;

		.coupon-container {
			.coupon-content {
				background-color: #fff;
				padding: 24rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
			}
		}
	}

	// 添加以下样式
	.active-border-top {
		border: 1rpx solid #FF6A47 !important;
		border-bottom: none !important;
		border-radius: 20rpx 20rpx 0 0 !important;
	}

	.active-border-bottom {
		border: 1rpx solid #FF6A47 !important;
		border-top: none !important;
		border-radius: 0 0 20rpx 20rpx !important;
	}

	.active-border {
		.item {
			border: 1rpx solid #FF6A47;

			border-bottom: none;
			/* 下边框由rules-box提供 */
		}

		.rules-box {
			border: 1rpx solid #FF6A47;
			border-top: none;
		}
	}

	.no-radius {
		.item {
			border-radius: 20rpx 20rpx 0 0 !important;
		}

		.rules-box {
			border-radius: 0 0 20rpx 20rpx !important;
		}
	}

	.item {
		position: relative;
		display: flex;
		height: 184rpx;
		margin-bottom: 0;
		border-radius: 20rpx;
		/* 确保圆角效果 */
		overflow: hidden;
		border: 1rpx solid transparent;
		transition: border-radius 0.2s ease;
		/* 防止内部元素溢出 */

		/* 默认模式 */
		&.normal-mode {
			.left {
				background: url("http://public.sxlingfu.com/moblie/images/coupon_left.png") 0 0/100% 100% no-repeat;
				color: white;
			}

			.right {
				background: url("http://public.sxlingfu.com/moblie/images/coupon_right.png") 0 0/100% 100% no-repeat;
			}
		}


		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 28%;
			height: 100%;
			color: white;

			.price-text {
				font-size: 70rpx;
				font-weight: 600;
			}

			.unit {
				font-size: 36rpx;
				margin-right: 4rpx;
			}

			.money {
				font-size: 88rpx;
				font-weight: 600;
			}

			.condition {
				font-size: 32rpx;
			}

			.text2 {
				font-size: 24rpx;
			}
		}

		.right {
			position: relative;
			width: 72%;
			height: 100%;

			.desc-box {
				width: calc(100% - 180rpx);
				padding-left: 46rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.desc {
					font-weight: 500;
					font-size: 32rpx;
					color: #333;
				}

				.date {
					font-size: 24rpx;
					color: #666;
					margin-top: 10rpx;
					font-weight: 400;
				}

				.rule {
					font-size: 24rpx;
					color: #999;
					margin-top: 14rpx;
					font-weight: 400;
				}
			}

			.other-box {
				position: absolute;
				top: 0;
				right: 0;

				.expire {
					background: #ffdfd8;
					border-radius: 0 20rpx 0 20rpx;
					padding: 4rpx 16rpx;
					font-size: 24rpx;
					color: #ff6a47;
					display: block;
				}
			}

			.use {
				position: absolute;
				top: 50%;
				right: 34rpx;
				transform: translateY(-50%);
				width: 119rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: linear-gradient(90deg, #ffab67, #fe5609);
				border-radius: 25rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
			}

			.image-box {
				position: absolute;
				top: 55%;
				right: 34rpx;
				transform: translateY(-50%);

				image {
					width: 110rpx;
					height: 110rpx;
				}
			}
		}

		/* 圆点基础样式 */
		.coupon-dot {
			position: absolute;
			left: 30%;
			width: 16rpx;
			height: 8rpx;
			transform: translateX(-50%);
			z-index: 2;
			overflow: hidden;
		}

		/* 上半圆点 */
		.coupon-dot-top {
			top: -4rpx;
			width: 40rpx;
			height: 20rpx;
			border-top: none;
			border-radius: 0 0 20rpx 20rpx;
			box-sizing: border-box;
			background-color: #f5f5f5;
		}

		/* 下半圆点 */
		.coupon-dot-bottom {
			bottom: -4rpx;
			width: 40rpx;
			height: 20rpx;
			border-bottom: none;
			border-radius: 20rpx 20rpx 0 0;
			box-sizing: border-box;
			background-color: #f5f5f5;
		}
	}

	/* 规则框样式 */
	.rules-box {
		width: 100%;
		padding: 20rpx;
		background: white;
		// border: 1rpx solid #FF6A47;
		border-top: none;
		border-radius: 0 0 20rpx 20rpx;
		transition: border-radius 0.2s ease;
		color: #666;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
		box-sizing: border-box;
		margin-top: -1px;
		border: 1rpx solid transparent;
		/* 与卡券底部无缝连接 */
	}

	.info-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.info-desc,
	.info-rule {
		font-size: 24rpx;
		opacity: 0.8;
		margin-bottom: 6rpx;
		display: block;
	}

	// 服务列表样式
	.service-list {
		gap: 20rpx;
		height: 100vh;

		.List-item {
			background: #ffffff;
			box-shadow: 0px 5rpx 20rpx 0px #e2e8f0;
			border-radius: 20rpx;
			padding: 24rpx 23rpx;
			margin: 26rpx 24rpx 0;

			.left_img {
				width: 203rpx;
				height: 203rpx;
				margin-right: 21rpx;
				border-radius: 20rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 45rpx;
			}

			.desc {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 33rpx;
				margin-top: 15rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.price1 {
				font-size: 20rpx;
				color: #ff6a47;
			}

			.price2 {
				font-weight: bold;
				font-size: 32rpx;
				color: #ff6a47;
				margin-right: 20rpx;

				.price2-text {
					font-weight: 400;
					font-size: 20rpx;
					color: #ff6a47;

				}
			}

			.pirce3 {
				font-size: 24rpx;
				color: #999999;
				text-decoration: line-through;
			}

			.text3 {
				font-weight: 400;
				font-size: 20rpx;
				color: #999999;
				line-height: 28rpx;
			}
		}
	}



	.item-left {
		gap: 20rpx;
	}

	.item-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.item-info {
		gap: 6rpx;
	}

	.info-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.info-desc {
		font-size: 24rpx;
		color: #666;
	}

	.info-tag {
		font-size: 22rpx;
		color: #999;
	}

	.item-right {
		gap: 6rpx;
	}

	.price {
		font-size: 28rpx;
		color: #ff6737;
		font-weight: bold;
	}

	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	::v-deep .custom-navbar {
		background-color: #FF6A47 !important;

		.title {
			color: #fff;
		}
	}
</style>